<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="true" title="确认订单" :border-bottom="false"></u-navbar>
		</view>
		<view class="selectAddress container_br">
			<view class="addressBox" v-if="address" @click="onShowAddress()">
				<view class="address">
					<view class="dwiocn">
						<u-icon :name="'/static/icon/dw.png'" size="32"></u-icon>
					</view>
					<view class="content">
						{{address.address}}
					</view>
					<view class="arrow">
						<u-icon size="32" name="arrow-right" color="#666"></u-icon>
					</view>
				</view>
				<view class="userInfo">
					<span class="name">{{address.contact_person}}</span> <span class="phone">{{address.contact_phone}}</span>
				</view>
			</view>

			<view class="goAddress" v-if="!address&addressList.length==0" @click="goAddress">
				<view class="title">
					去添加地址
				</view>
				<view class="icon">
					<u-icon :name="'/static/icon/add.png'" size="42"></u-icon>
				</view>
			</view>

		</view>
		<!-- 商品区域 -->
		<view class="goodsInfo container_br" v-if="goodsInfo">
			<view class="goods flc" v-for="item in goodsInfo" :key="item.id">
				<view class="left" v-if="item.goods">
					<image :src="item.goods.images_format[0]" mode="widthFix" style="width: 160rpx;"></image>
				</view>
				<view class="right">
					<view class="name">
						{{item.goods.name}}{{item.skus_name?item.skus_name[0]:''}}
					</view>
					<view class="type">
						规格{{item.skus_name||""}}
					</view>
					<view class="price_num jsbc">
						<view class="price">
							￥{{item.goods.price}}
						</view>
						<view class="num">
							{{item.goods_number}}
						</view>
					</view>
				</view>
			</view>
			<view class="totalPrice cell jsbc">
				<view class="titleDesc">
					商品总价
				</view>
				<view class="price">
					￥{{totalPrice}}
				</view>
			</view>
			<view class="totalDesc cell">
				<view class="desc">
					共{{goodsInfo.length}}件商品 合计：<span class="price">￥{{totalPrice}}</span>
				</view>
			</view>
		</view>
		<view class="remarkBox container_br">
			<view class="title">
				订单备注(选填)
			</view>
			<view class="remark">
				<textarea v-model="remark" placeholder="请输入备注消息" />
			</view>
		</view>
		<view class="submitBox jsbc">
			<view class="totalPrice">
				实付<span class="price">￥{{totalPrice}}</span>
			</view>
			<view class="btn" @click="()=>this.show=true">
				提交订单
			</view>
		</view>

		<!-- 支付方式 -->
		<u-popup v-model="show" mode="bottom" :closeable="true" border-radius="28">
			<view class="popBox">
				<view class="total_price">
					<span class="icon">￥</span>{{totalPrice}}
				</view>
				<view class="payItemView">
					<view class="payTypeTitme">请选择支付方式</view>
					<view class="payTypeItem jsbc" @click="onSelecteds(1)">
						<view class="left flc">
							<u-icon name="/static/icon/weixin.png" size="50"></u-icon>
							<view class="payTypeTitle">微信支付</view>
						</view>

						<view class="right">
							<u-icon name="/static/icon/selected.png" size="40" v-if="payType == 1"></u-icon>
							<u-icon name="/static/icon/unselected2.png" size="40" v-else></u-icon>
						</view>
					</view>
				</view>
				<view class="pay" @click="onOrderPayment">
					立即支付
				</view>
			</view>
		</u-popup>
		<addressPopup ref="address" :address-list="addressList" @select="onSelected" @edit="onEditAddress"
			@add="onNewAddress"></addressPopup>
	</view>
</template>

<script>
	import {
		getAddressList,
		getDefaultAddress,
		cartSettle
	} from '@/api/index.js'
	import {
		useCartStore
	} from '../../stores/cart'
	import baseUrl from '@/config/config.js'
	import addressPopup from "@/components/address-popup.vue"
	import {
		toast,
		toastC,
		tiao
	} from '@/utils/common.js'
	export default {
		components: {
			addressPopup
		},
		data() {
			return {
				cartFuc: useCartStore(),
				show: false,
				payType: "",
				goodsInfo: "",
				address: "",
				addressList: [],
				default: false,
				addressId: "",
				totalPrice: "",
				computerPrice: "",
				remark:"",
				ids:[]
			};
		},
		onLoad(res) {
			console.log(res);
			this.goodsInfo = this.cartFuc.cartOrder
			if(this.goodsInfo.length>0){
				this.goodsInfo.forEach(item=>{
					this.totalPrice = Number(this.totalPrice)+ Number(item.goods.price) * Number(item.goods_number)
					this.ids.push(item.id)
				})
			}
			this.totalPrice = (this.totalPrice).toFixed(2)

		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				getDefaultAddress().then(res => {
					if (res.data) {
						this.address = res.data
						this.addressId = res.data.id
					}
				})
				this.initAddress()
			},
			initAddress() {
				let self = this;
				getAddressList().then(res => {
					console.log("获取地址", res);
					self.addressList = res.data;
				})
			},

			onShowAddress() {
				this.$refs.address.open();
			},
			onNewAddress() {
				// this.$utils.jump('/other/add-address/add-address?type=0');
				uni.navigateTo({
					url: '/other/add-address/add-address?type=0'
				})
			},
			onSelected(item) {
				this.address = item;
				this.addressId = item.id;
			},
			onEditAddress(item) {
				// this.$utils.jump(');
				uni.navigateTo({
					url: '/other/add-address/add-address?type=1&id=' + item.id
				})
			},
			goAddress() {
				uni.navigateTo({
					url: '/other/delivery-address/delivery-address'
				})
			},

			//选择支付方式
			onSelecteds(i) {
				this.payType = i
			},

			onOrderPayment() {
				if (!this.addressId == 1 || this.addressId == null) {
					toast('请选择收货地址')
					return
				}
				if (this.payType == '' || this.payType == null) {
					toast('请选择支付方式')
					return
				}
				if (this.goodsInfo.stock < 1) {
					toast("库存不足");
					return;
				}
				cartSettle({
					cart_ids:this.ids,
					delivery_address_id: this.addressId,
					remark:this.remark
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.redirectTo({
							url: '/page/payment/payment?order_no=' +
								res.data.order_no + '&money=' + this.totalPrice
						});
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selectAddress {
		.addressBox {
			box-sizing: border-box;
			padding: 0 20rpx;
			color: #333;
			font-size: 28rpx;

			.address {
				display: flex;
				align-items: flex-start;
			}

			.address .dwiocn {
				height: 32rpx;
				margin-top: 8rpx;
			}

			.address .arrow {
				height: 32rpx;
				margin-top: 8rpx;
			}

			.address .content {
				height: 96rpx;
				width: 560rpx;
				line-height: 48rpx;
				font-size: 32rpx;
			}

			.userInfo {
				margin-top: 10rpx;
			}

			.userInfo .phone {
				margin-left: 40rpx;
			}
		}

		.goAddress {
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				height: 42rpx;
				font-size: 32rpx;
			}

			.icon {
				height: 42rpx;
				margin-left: 10rpx;
			}
		}
	}

	.goodsInfo {
		.goods .left {
			width: 160rpx;
			height: 160rpx;
		}

		.goods .right {
			height: 480rpx;
			height: 160rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 40rpx;

			.name {
				font-size: 32rpx;
				color: #333;
			}

			.type {
				font-size: 26rpx;
				color: #666;
			}

			.price_num {
				width: 480rpx;
			}

			.price_num .price {
				font-size: 36rpx;
				color: #FA453CFF;
			}
		}

		.cell {
			padding: 20rpx 0;
			border-top: 1rpx solid #dedede;
		}

		.totalPrice {
			margin-top: 20rpx;

			.price {
				font-size: 28rpx;
				color: #333333;
			}
		}

		.coupons .price {
			font-size: 32rpx;
			color: #FA453C;
		}

		.totalPrice .titleDesc,
		.coupons .titleDesc {
			font-size: 28rpx;
			color: #333333;
		}

		.totalDesc {
			display: flex;
			flex-direction: row-reverse;

			.price {
				font-weight: 600;
				font-size: 36rpx;
			}
		}
	}

	.remarkBox {
		.title {
			font-size: 32rpx;
			color: #333;
		}

		.remark {
			margin-top: 20rpx;
		}
	}

	.submitBox {
		width: 750rpx;
		height: 116rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(153, 153, 153, 0.2);
		box-sizing: border-box;
		padding: 13rpx 20rpx 33rpx 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;

		.totalPrice {
			font-size: 30rpx;
			color: #333;

			.price {
				font-size: 36rpx;
				color: #FA453CFF;
				margin-left: 10rpx;
			}
		}

		.btn {
			text-align: center;
			width: 200rpx;
			height: 70rpx;
			background: #6BC665;
			border-radius: 35rpx;
			line-height: 70rpx;
			color: #fff;
			font-size: 26rpx;
		}
	}

	.couponList {
		width: 750rpx;
		height: 600rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 20rpx;

		.title {
			font-size: 46rpx;
			text-align: center;
			font-weight: 600;
			color: #333;
		}

		.couponbox {
			height: 500rpx;
			width: 710rpx;
			box-sizing: border-box;
			overflow: auto;

			&::-webkit-scrollbar {
				display: none;
			}

			.item {
				width: 690rpx;
				height: 190rpx;
				background-image: url('/static/img/1.png');
				background-size: cover;
				background-repeat: no-repeat;
				margin-top: 20rpx;
			}

			.item .left {
				width: 150rpx;
				text-align: center;
			}

			.item .left .priceBox {
				color: #FA453C;
				margin-top: 40rpx;
			}

			.item .left .priceBox .icon {
				font-size: 24rpx;
			}

			.item .left .priceBox .price {
				font-size: 56rpx;
				font-weight: 700;
			}

			.item .left .name {
				font-size: 24rpx;
				color: #333333;
			}

			.item .right {
				width: 540rpx;
				height: 190rpx;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.item .right .desc {
				font-size: 30rpx;
			}

			.item .right .btns {
				display: flex;
				flex-direction: row-reverse;
			}

			.item .right .noBtn {
				width: 150rpx;
				height: 50rpx;
				background: #dedede;
				border-radius: 25rpx;
				line-height: 50rpx;
				color: #333;
				text-align: center;
				font-size: 24rpx;
			}

			.item .right .btn {

				width: 150rpx;
				height: 50rpx;
				background: #FA453C;
				border-radius: 25rpx;
				line-height: 50rpx;
				color: #fff;
				text-align: center;
				font-size: 24rpx;
			}

			.item .right .time {
				font-size: 24rpx;
				color: #999999;
			}
		}

		.noData {
			font-size: 44rpx;
			font-weight: 600;
			text-align: center;
			margin-top: 40rpx;
		}
	}

	// 支付方式
	.popBox {
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		height: 720rpx;
		position: relative;

		.total_price {
			margin-top: 40rpx;
			text-align: center;
			font-size: 56rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #333333;

			.icon {
				font-size: 36rpx;
			}
		}

		.payTypeTitle {
			margin-left: 20rpx;
		}

		.pay {
			position: absolute;
			bottom: 40rpx;
			left: 30rpx;
			width: 690rpx;
			height: 80rpx;
			background: #6BC665;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
		}

	}
</style>